<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变换原点</title>
    <style>
        .outer {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            margin: 0 auto;
            margin-top: 100px;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
            /* 变换原点 通过关键词修改原点位置*/
            /*transform-origin: top left;*/
            /* 通过像素值修改原点位置 */
            /*transform-origin: 50px 50px;*/
            /*通过百分比改变原点位置*/
            /*transform-origin: 25% 25%;*/
            /*原点位置只写一个 像素则是x轴 y轴取50% 写关键词另一个位置取50% */
            transform-origin: 20px;
            transform: rotate(0deg);
        }
        .test {
            width: 50px;
            height: 50px;
            background-color: lime;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="son">
        <div class="test"></div>
    </div>
</div>
</body>
</html>